<template>
	<div class="wrapper">
		<city-header></city-header>
		<city-search :cities="cities"></city-search>
		<city-list :cities="cities" :hotCities="hotCities" :letter="letter"></city-list>
		<city-alphabet :cities="cities" @change="handleLetterChange"></city-alphabet>
	</div>
		
</template>

<script>
import cityHeader from "./components/header"
import citySearch from "./components/search"
import cityList from "./components/list"
import cityAlphabet from "./components/alphabet"
import axios from 'axios'
export default{
	name: 'City',
	components:{
		cityHeader,
		citySearch,
		cityList,
		cityAlphabet
	},
	data () {
		return {
			cities:{},
			hotCities:[],
			letter:''
		}
	},
	methods:{
  	getHomeInfo () {
  		axios.get('/api/city.json')
  			.then(this.getHomeInfoSucc)
  	},
  	getHomeInfoSucc (res) {
  		res=res.data
  		if(res.ret&&res.data){
  			const data=res.data
  			this.hotCities=data.hotCities
  			this.cities=data.cities
  		}
  	},
  	handleLetterChange (letter){
  		this.letter=letter
  	}
  },
  mounted () {
  	this.getHomeInfo()
  }
}
</script>

<style lang="stylus" scoped>

</style>